import React from 'react';
import {Link} from 'dva/router';
import {WingBlank, WhiteSpace, InputItem, Flex, Icon} from 'antd-mobile';
import {Layout, Line, Panel, TimeLine} from '../../components';
import './index.less';

const FlexItem = Flex.Item;

class BankResult extends React.Component {

  constructor(props) {
    super(props)
  }

  render() {
    return (
      <Layout>
        <div className={'page-loan'}>
          <Panel bodyCls={'l-h-body'} className={'l-header'}>
            <div className={'l-title'}>借款金额(元)</div>
            <div className={'l-input'}>
              <span>￥</span>
              <InputItem placeholder={'请输入借款金额'}/>
            </div>
            <Flex justify={'center'} className={'l-tips'}>
              <FlexItem>
                可借范围2000~5000元
              </FlexItem>
              <FlexItem align={'right'}>
                <span>全部借出</span>
              </FlexItem>
            </Flex>
          </Panel>
          <WhiteSpace/>
          <div className={'l-info'}>
            <Line title={'借款期限'} extra={'1234'}/>
            <Line title={'还款周期'} extra={"每15天"}/>
          </div>
          <WhiteSpace/>
          <div className={'l-info'}>
            <Line extra={'查看'} onClick={() => {
              console.log("点击查看还款计划")
            }} title={'还款计划'}/>
            <Line onClick={() => {
              console.log("点击查看还款计划")
            }} extra={'150.00'} title={'服务费'}/>
            <Line extra={'2300.00'} title={'到账金额'}/>
            <Line extra={'考学'} title={'消费用途'}/>
          </div>
          <WhiteSpace/>
          <div className={'l-info'}>
            <Line extra={"招商银行7536"} title={'收款卡号'}/>
          </div>
          <WhiteSpace size={'lg'}/>
          <div className={'l-footer'}>
            <WingBlank>
              <p>点击提交则表示同意<Link to={'/agreement'}>《条款》</Link><Link to={'/agreement'}>《合同》</Link></p>
              <p>体现金额会在24小时内发放，请注意查收</p>
            </WingBlank>
          </div>
          <WhiteSpace/>
          <div className={'l-btn'}>提交</div>
        </div>
      </Layout>
    );
  }
}

BankResult.propTypes = {};

export default BankResult;
